<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="formInline.status" style="width:100px">
            <el-option
              v-for="item in status_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select filterable v-model="store_id" style="width:300px">
            <el-option
              v-for="item in store_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            style="width:300px"
            v-model="formInline.order_id"
            placeholder="请输入完整调拨单号或单号末尾数字"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="调拨单号" prop="order_no"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="date_create"></el-table-column>
        <el-table-column align="center" label="调出店" prop="house_out"></el-table-column>
        <el-table-column align="center" label="收货方" prop="house_in"></el-table-column>
        <el-table-column align="center" label="调拨状态">
          <template slot-scope="scope">
            <span>{{scope.row.status|kOrderStatus}}</span>
          </template>
        </el-table-column>
        <!-- 列表的操作按钮 -->
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <router-link
              v-show="scope.row.status==5"
              :to="{name:'warehouse/kosInfo',params :{order_id:scope.row.order_id,routerflag:1}}"
            >
              <el-button type="primary" plain size="mini">确认</el-button>
            </router-link>
            <router-link
              v-show="scope.row.status>5||scope.row.status==3"
              :to="{name:'warehouse/kosInfo',params :{order_id:scope.row.order_id,routerflag:2}}"
            >
              <el-button type="primary" plain size="mini">详情</el-button>
            </router-link>
            <el-button
              v-show="scope.row.status==6||scope.row.status==8"
              @click="exportClick(scope.row.order_id,scope.$index)"
              type="primary"
              size="mini"
              plain
              :loading="scope.row.exportLoading"
            >
              下载
              <count-down :ref="'cd'+scope.$index" />
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, getPage, getStore, getExport } from "@/api/warehouse/kuaShip";
export default {
  data() {
    return {
      listLoading: false,
      status_list: [
        { id: "1", name: "待处理" },
        { id: "2", name: "已处理" },
      ],
      store_list: [],
      store_id: "",
      formInline: {
        status: "1",
        order_id: "",
        store_id: "",
      },
      list: null,
      totalDataNumber: 1,
      currentPage: 1,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.list) {
        vm.getStoreList();
      }
      if (vm.$route.params.routerflag) {
        vm.fetchData();
      }
    });
  },
  methods: {
    getStoreList() {
      getStore({ look_del: 0, category_id: 539 }).then((res) => {
        this.store_list = res;
        let data = res.filter((val) => val.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.store_id = data[0].id;
        } else {
          this.store_id = this.store_list[0].id;
        }
        this.fetchData();
      });
    },
    searchClick() {
      this.fetchData();
    },
    getData(data) {
      data.forEach((val) => {
        val.exportLoading = false;
        val.status_name =
          val.status == 1 ? "待确认" : val.status == 2 ? "已确认" : "已关闭";
      });
      this.list = data;
    },
    exportClick(id, index) {
      this.list[index].exportLoading = true;
      getExport({ order_id: id });
      let key = "cd" + index;
      this.$refs[key].countDownF(30).then(() => {
        this.list[index].exportLoading = false;
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.list = [];
      this.currentPage = 1;
      this.formInline.store_id = this.store_id;
      getPage(this.formInline)
        .then((response) => {
          this.totalDataNumber = response * 20;
          getList(this.formInline)
            .then((res) => {
              this.getData(res);
              this.listLoading = false;
            })
            .catch((res) => {
              this.listLoading = false;
            });
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then((response) => {
        this.getData(response);
        this.listLoading = false;
      });
    },
  },
};
</script>